<template>
  <div style="background-color: #0E0E0EFF">
    <el-aside :width="!isShow?'200px':'64px'">
      <el-button type="text" @click="this.isShow=!this.isShow"
                 :icon="isShow?'el-icon-s-fold':'el-icon-s-unfold'">
      </el-button>
      <el-menu
        :default-active="$route.path"
        background-color="#F5F5F5FF"
        text-color="#000000FF"
        active-text-color="#1890ff"
        :unique-opened="true"
        :collapse="isShow" :collapse-transition="false" router>
        <!--    一级菜单区域-->
        <el-sub-menu v-for="item in menuList" :index="item.id + ''">
          <template #title>
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item-group class="menu-item-group"  v-for="item2 in item.children">
            <el-menu-item :index="item2.url+''">
              <i :class="item2.icon"></i>
              {{item2.name}}
            </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-aside>
  </div>
</template>
<!--1872219125-->
<script>
//import {getMenuList} from '../api/axios/system'
export default {
  name: "Aside",
  data() {
    return {
      collapse: false,
      isShow: false,
      menuList: [],
    }
  },
  created() {
    this.getMenuList();
  },
  mounted() {

  },
  methods: {
    getMenuList(){
      var par = {
        category: 0
      }
      this.$api.system.getMenuList(par).then(res => {
        console.log(res.data.data);
      this.menuList =  res.data.data;
      })
    }
  }
}
</script>

<style scoped>
/* 文字 */
::v-deep.el-submenu.is-active > .el-submenu__title {
  color: #409eff !important;
}
/* icon图标也跟着变 */
::v-deep .el-submenu.is-active > .el-submenu__title i {
  color: #409eff !important;
}
.el-menu {
  height: 100%;
}
.el-aside {
  display: flex;
  flex-direction: column;
  background-color: #F5F5F5FF;
  height: 100%;
}
.el-button {
  font-size: 15px;
  color: black;
}
.el-sub-menu .el-menu-item{
  min-width: unset;
}


</style>